<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();
	});
	function abc(loginID, index) {
		$.ajax({
				type : "POST",
				url : "adminChangeState",
				data : {
					"loginID" : loginID,
					"index" : index,
				},
				//expect html to be returned
				success : function(msg) {
					var idUserState = "userState" + index;
					var idInput = "buttonSwitchState" + index;
					$("#" + idUserState).html(msg);
					if (msg == "enabled") {
						$("#" + idInput).val("Disable");
					}
					else if (msg == "disabled") {
						$("#" + idInput).val("Enable");						
					}
				}
		});
	}
</script>

<div id="content-outer">
	<!-- start content -->
	<div id="content">

		<!--  start page-heading -->
		<div id="page-heading">
			<h1>User Management</h1>
		</div>
		<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="content-table">
			<tr>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowleft.jpg" width="20" height="300"
					alt="" /></th>
				<th class="topleft"></th>
				<td id="tbl-border-top">&nbsp;</td>
				<th class="topright"></th>
				<th rowspan="3" class="sized"><img
					src="images/shared/side_shadowright.jpg" width="20" height="300"
					alt="" /></th>
			</tr>
			<tr>
				<td id="tbl-border-left"></td>
				<td>
					<div id="content-table-inner">
						<div id="page-heading">
							<h1>Modify User State</h1>
						</div>
						<div id="content-table-inner" style="padding-left: 35px;">
							<table id="mytable">
								<thead>
									<tr>
										<th>Login Id</th>
										<th>User State</th>
										<th>Role</th>
										<th>State Action</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="user" items="${listUsers}" varStatus="loop">
										<tr>
											<td>${user.getLoginId()}</td>
											<td class="classTD" id="userState${loop.index}">${user.getUserState()}</td>
											<td>${user.getRole().getRole()}</td>
											<c:choose>											
											<c:when test="${user.getUserState() == 'enabled'}">
												<td><input id="buttonSwitchState${loop.index}" type="button" value="Disable"													
														onclick="abc('${user.getLoginId()}', '${loop.index}');"
														class="btn btn-primary"
													/>											
												</td>
											</c:when>
											<c:otherwise>
												<td><input id="buttonSwitchState${loop.index}" type="button" value="Enable"													
														onclick="abc('${user.getLoginId()}', '${loop.index}');"
														class="btn btn-primary"
													/>											
												</td>
											</c:otherwise>
											</c:choose>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</td>
				<td id="tbl-border-right"></td>
			</tr>
			<tr>
				<th class="sized bottomleft"></th>
				<td id="tbl-border-bottom">&nbsp;</td>
				<th class="sized bottomright"></th>
			</tr>
		</table>
		<br />
	</div>
	<div class="clear">&nbsp;</div>
</div>